<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>自定义指令</title>
        <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
        <style>
            .row { line-height: 30px ; margin: 5px auto ; }
        </style>
        <script src="/javascripts/vue@3.0.11.js" ></script>
    </head>
    <body>

        <div class="container" id="first">
            <div class="row" v-iterator:p="pandas">
                <!--
                <div class="col-4">{{p.id}}</div>
                <div class="col-4">{{p.name}}</div>
                <div class="col-4">{{p.age}}</div>
                -->
            </div>
        </div>

        <script>
            const app = Vue.createApp({
                data(){
                    return {
                        pandas: [
                            {id: 1 , name: '团团' , age: 5 },
                            {id: 2 , name: '圆圆' , age: 4 },
                            {id: 3 , name: '和和' , age: 6 },
                            {id: 4 , name: '美美' , age: 3 }
                        ]
                    }
                }
            });

            app.directive( 'iterator' , (el,binding)=>{
                let param = binding.arg ;
                let value = binding.value ;
                console.log( param , value );
            });

            const vm = app.mount( '#first' );
        </script>

    </body>
</html>